Node / meshtastic / Meshtastic-Android / files / docs / assets / screenshots / README.md

Displaying Raw • View rendered • Download

Tc9d1d9# Screenshots

This directory is the **single source of truth** for screenshot assets referenced by the

documentation pages. It is consumed by both:

Tff7b72- the **Jekyll docs site** (markdown references Ta5d6ff`../../assets/screenshots/{name}.png`), and

Tff7b72- the **in-app docs browser** — Ta5d6ff`:feature:docs:syncDocsToComposeResources` bundles this

directory into compose resources at Ta5d6ff`files/docs/assets/screenshots/`.

Ta5d6ff`DocImageWiringTest` (in Ta5d6ff`:feature:docs`) fails the build if a doc page references an image

that is not present here.

Tc9d1d9## Updating Screenshots

Most screenshots are generated from the Compose Preview Screenshot Testing reference images

in Ta5d6ff`screenshot-tests/src/screenshotTestDebug/reference/`. After changing a UI component:

Ta5d6ff```Ta5d6ffbash

./gradlew :screenshot-tests:updateDebugScreenshotTest T8b949e# regenerate reference images

./gradlew :screenshot-tests:copyDocsScreenshots T8b949e# refresh this directory

Ta5d6ff```

Ta5d6ff`copyDocsScreenshots` copies **only** the light-mode reference images that have a semantic

alias in Ta5d6ff`screenshot-tests/docs-screenshot-aliases.properties`, renaming them on the way.

Commit the refreshed PNGs together with the reference-image changes.

Tc9d1d9## Adding a Screenshot for a New Doc Page

Tff7b721. Add (or reuse) a Ta5d6ff`Preview*`/Ta5d6ff`*Preview` composable with representative mock data in the

feature module, and a Ta5d6ff`Screenshot*` wrapper in Ta5d6ff`screenshot-tests` (see

Ta5d6ff`DiscoveryScreenshotTests.kt` for the pattern). If the component renders timestamps, give

it a Ta5d6ff`timeTextOverride`-style parameter so renders stay deterministic across machines.

Tff7b722. Make sure the test class is covered by Ta5d6ff`screenshot-tests/docs-screenshots-manifest.txt`.

Tff7b723. Map the semantic name in Ta5d6ff`screenshot-tests/docs-screenshot-aliases.properties`:

Ta5d6ff`{page-id}_{description}.png=Screenshot{Name}_Light_{hash}_0.png`

Tff7b724. Run the two Gradle tasks above and reference the image from the doc page.

Tc9d1d9## Naming Convention

Ta5d6ff```

{page-id}_{description}.png

```

Examples: Ta5d6ff`onboarding_welcome.png`, Ta5d6ff`connections_bluetooth_scan.png`, Ta5d6ff`discovery_preset_result.png`.

Tc9d1d9## Guidelines

Tff7b72- PNG format, light-mode only (dark variants live in the reference directory)

Tff7b72- Name screenshots to match the docs page they appear in

Tff7b72- Keep filenames lowercase with underscores

Tff7b72- A few screenshots (Ta5d6ff`connections_wifi_*.png`) are manual captures with no CST source yet;

they are hand-maintained until matching previews exist